<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过classList修改样式</title>
    <style>
        .盒子 {
            width: 200px; /* 宽高 */
            height: 200px;
            color: #333; /* 文字颜色 */

            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/
        }

        .修改颜色 {
            color: red; /* 文字颜色 */
            background-color: #9ba0c0; /* 背景色 */
        }

        .修改颜色 {
            color: red; /* 文字颜色 */
            background-color: #9ba0c0; /* 背景色 */
        }

        .加内边距 {
            padding: 30px;
        }
    </style>
</head>
<body>
<h3>通过 classList 操作类控制CSS</h3>
<p>
    为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名 (CSS样式类)
</p>
<p>
    语法: <br>
    追加一个类 <br>
    元素.classList.add('CSS类名') <br>
    删除一个类 <br>
    元素.classList.remove('CSS类名') <br>
    切换一个类 <br>
    元素.classList.toggle('CSS类名')
</p>

<p>
    <strong>
        使用 className 和classList的区别? <br>
        className会覆盖以前的类名, classList是追加和删除不影响以前类名 <br>
        所以我们一般使用,classList 来修改CSS样式.
    </strong>
</p>
<hr>

<!--演示JS里操作类名  这里2个类-->
<div class="盒子 加内边距">盒子内容,啊啊啊啊啊啊啊啊啊啊</div>

<script>
    // 获取DOM元素
    const DOM_盒子 = document.querySelector('.盒子')

    // 修改样式
    // 注意: 类名不加点，并且是字符串
    DOM_盒子.classList.add('修改颜色') // 追加一个类
    // DOM_盒子.classList.remove('加内边距') // 删除一个类

    // 切换类  toggle()  有还是没有啊， 有就删掉，没有就加上. 相当于取反
    DOM_盒子.classList.toggle('加内边距') // 我们这里元素有这个类名,所以删除了

</script>
</body>
</html>